<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide('formValidate')" :mask-closable="false">


            <Form ref="formValidate" :model="params" :rules="ruleValidate" label-position="top">
                <FormItem label="当前版本：" prop="currentVersion">
                    <Input v-model.trim="params.currentVersion" :disabled="usernameDis"
                           placeholder="请输入版本号"></Input>
                </FormItem>
                <FormItem label="更新标题：" prop="updateTitle">
                    <Input v-model.trim="params.updateTitle" placeholder="请输入更新标题"></Input>
                </FormItem>
                <FormItem label="终端类型：" prop="terminalType">
                    <RadioGroup v-model="params.terminalType" type="button">
                        <Radio label="Android">Android</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="强制更新：" prop="isUpdate">
                    <RadioGroup v-model="params.isUpdate" type="button">
                        <Radio label="0">不强制</Radio>
                        <Radio label="1">强制</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="安装包路径：" prop="packageUrl">
                    <Upload :action="action" ref="upload" :headers="headers" :show-upload-list="true" name="file"
                            :on-success="uploadSuccess" :on-remove="removeUpload" :before-upload="beforeUpload" :format="['apk']">
                        <Button icon="ios-cloud-upload-outline">上传安装包</Button>
                    </Upload>
                </FormItem>
                <FormItem label="更新内容：" prop="updateContext">
                    <Input v-model.trim="params.updateContext" type="textarea" :rows="4" placeholder="请输入更新内容"></Input>
                </FormItem>
            </Form>


            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide('formValidate')">取消</Button>
                <Button v-if="type != 1" type="primary" @click="handleSubmit('formValidate')" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "edition-ope",
        data() {
            return {
                isShowModal: false,
                loadingBtn: false,
                usernameDis: false,
                title: '查看信息',
                type: 0,
                action: this.$uploadURL,
                headers: {
                    token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
                },
                params: {
                    currentVersion: '',
                    updateTitle: '',
                    updateContext: '',
                    packageUrl: '',
                    releaseTime: '',
                    terminalType: 'Android',
                    isUpdate: '0',
                    appVersionId: ''
                },
                ruleValidate: {
                    currentVersion: [
                        {required: true, message: '版本号不能为空', trigger: 'change'}
                    ],
                    updateTitle: [
                        {required: true, message: '更细标题不能为空', trigger: 'change'}
                    ],
                    updateContext: [
                        {required: true, message: '更新内容不能为空', trigger: 'change'}
                    ],
                    isUpdate: [
                        {required: true, message: '请选择是否强制更新', trigger: 'change'}
                    ],
                    terminalType: [
                        {required: true, message: '请选择终端类型', trigger: 'change'}
                    ],
                    packageUrl: [
                        {required: true, message: '请上传安装包', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            // 点击提交验证
            handleSubmit(name) {
                console.log(this.params);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // this.$Message.error('验证通过');
                        /**
                         * type判断
                         * 1.查看 2.新增 3.编辑
                         */
                        switch (this.type) {
                            case 1:
                                // this.title = '查看APP版本';
                                break;
                            case 2:
                                // 新增APP版本
                                this.addVersion();
                                break;
                            case 3:
                                // 编辑APP版本
                                this.updateVersion();
                                break;
                            default:
                                this.$Notice.error({
                                    title: 'APP版本管理',
                                    desc: '查看，新增，编辑区分判断报错',
                                    duration: 0
                                });
                                break
                        }
                    } else {
                        this.$Message.error('还有信息没有填写合格哦~');
                    }
                })
            },
            // 上传之前
            beforeUpload(){
                this.$refs.upload.clearFiles();
            },
            // 上传安装包成功
            uploadSuccess(response, file, fileList) {
                if (response.status == 200) {
                    this.params.packageUrl = response.data;
                }
                if (response.status == 201) {
                    this.$refs.upload.clearFiles();
                    this.$Message.error(response.msg);
                }
                if (response.status == 500) {
                    this.$refs.upload.clearFiles();
                    this.$Notice.error({
                        title: '服务器内部错误',
                        desc: '上传安装包接口报错',
                        duration: 0
                    });
                }
            },
            // 删除上传图片
            removeUpload(file, fileList) {
                if(!fileList.length){
                    this.params.packageUrl = '';
                }
            },
            // 显示模态框
            show(type, row) {
                this.isShowModal = true;
                this.type = type;
                /**
                 * type判断
                 * 1.查看 2.新增 3.编辑
                 */
                switch (type) {
                    case 1:
                        this.title = '查看APP版本';
                        this.findVersionInfo(row);
                        break;
                    case 2:
                        this.title = '新增APP版本';
                        break;
                    case 3:
                        this.title = '编辑APP版本';
                        this.findVersionInfo(row);
                        break;
                    default:
                        this.$Notice.error({
                            title: 'APP版本管理',
                            desc: '查看，新增，编辑模态框报错',
                            duration: 0
                        });
                        break
                }
            },
            // 新增APP版本
            addVersion() {
                this.$Spin.show();
                this.axios.post('/appVersion/addVersion', this.params).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$emit('changeDate');
                        this.$Message.success('操作成功.');
                        this.hide('formValidate');
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '新增APP版本接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 编辑APP版本
            updateVersion() {
                this.$Spin.show();
                this.axios.post('/appVersion/updateVersion', this.params).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$emit('changeDate');
                        this.$Message.success('操作成功.');
                        this.hide('formValidate');
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '编辑APP版本接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 查询APP版本详情
            findVersionInfo(row) {
                this.$Spin.show();
                this.axios.post('/appVersion/findVersionInfo', {
                    appVersionId: row.appVersionId
                }).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.params.appVersionId = res.data.appVersionId;
                        this.params.currentVersion = res.data.currentVersion;
                        this.params.updateTitle = res.data.updateTitle;
                        this.params.packageUrl = res.data.packageUrl;
                        this.params.terminalType = res.data.terminalType;
                        this.params.isUpdate = res.data.isUpdate.toString();
                        this.params.updateContext = res.data.updateContext;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看APP版本详情接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 关闭模态框
            hide(name) {
                this.isShowModal = false;
                this.params.appVersionId = '';
                this.$refs[name].resetFields();
            }
        }
    }
</script>

<style scoped>

</style>